<template>
  <view class="custom-tabbar">
    <view
      class="tab-item"
      :class="{ active: currentTab === 'index' }"
      @tap="switchTab('index')"
    >
      <view class="tab-icon">
        <image
          :src="currentTab === 'index' ? selectedHomeIcon : homeIcon"
          mode="aspectFit"
        />
      </view>
      <text class="tab-text">首页</text>
    </view>

    <view class="tab-divider"></view>

    <view
      class="tab-item"
      :class="{ active: currentTab === 'user' }"
      @tap="switchTab('user')"
    >
      <view class="tab-icon">
        <image
          :src="currentTab === 'user' ? selectedUserIcon : userIcon"
          mode="aspectFit"
        />
      </view>
      <text class="tab-text">我的</text>
    </view>
  </view>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from "vue";
import { useRouter } from "vue-router";

// 定义props和emits
const props = defineProps({
  currentTab: {
    type: String,
    default: "index",
    required: true
  }
});

const emit = defineEmits(['tabChange']);
const router = useRouter();

// 图标路径
const homeIcon = "/static/images/tabbar/homepage.png";
const selectedHomeIcon = "/static/images/tabbar/homepage-sel.png";
const userIcon = "/static/images/tabbar/user.png";
const selectedUserIcon = "/static/images/tabbar/user-sel.png";

// 切换tab
const switchTab = (tab) => {
  // 通知父组件切换tab
  emit('tabChange', tab);

  // 页面跳转
  if (tab === "index") {
    uni.switchTab({ url: "/pages/index/index" });
  } else if (tab === "user") {
    uni.switchTab({ url: "/pages/user/user" });
  }
};

onMounted(() => {
});

onShow(() => {
});
onUnmounted(() => {
  // 清理监听器
});
</script>

<style scoped lang="scss">
.custom-tabbar {
  display: flex;
  align-items: center;
  justify-content: space-around;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 120rpx;
  background: #ffffff;
  box-shadow: 0 -2rpx 16rpx rgba(0, 0, 0, 0.1);
  z-index: 999;
  padding-bottom: env(safe-area-inset-bottom); // 适配iPhone底部安全区域
}

.tab-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex: 1;
  height: 100%;
  transition: all 0.3s ease;

  &.active {
    .tab-icon {
      transform: scale(1.1);
    }
    .tab-text {
      color: #3a86b9;
      font-weight: 600;
    }
  }
}

.tab-icon {
  width: 60rpx;
  height: 60rpx;
  margin-bottom: 8rpx;
  transition: transform 0.3s ease;

  image {
    width: 100%;
    height: 100%;
  }
}

.tab-text {
  font-size: 24rpx;
  color: #666666;
  transition: all 0.3s ease;
}

.tab-divider {
  width: 2rpx;
  height: 80rpx;
  background: #f0f0f0;
  margin: 0 20rpx;
}
</style>
